<template>
  <div class="content-box">
    <h2 class="demo-title">图标</h2>
    <p class="demo-introduction">语义化的矢量图形。</p>
    <g-anchor>
      <g-anchor-link href="g-simple" title="使用方法" />
      <g-anchor-link href="g-ofen-list" title="常用图标" />
      <g-anchor-link href="g-list" title="图标集合" />
    </g-anchor>

    <div class="demo-tip">
      <p>该项目使用阿里图标库</p>
      <p>
        <a
          href="https://www.iconfont.cn/"
          target="_blank"
        >
          https://www.iconfont.cn/
        </a>
      </p>
    </div>

    <div class="g-wrap" id="g-simple">
      <!-- 使用方法DEMO -->
      <g-block-box
        :introduction="'直接通过设置类名为 iconfont，icon-iconName 来使用即可。例如：'"
        :title="'使用方法'"
        class="demo-i-wrap"
      >
        <template v-slot:demo>
          <g-icon name="taiyang"></g-icon>
          <g-icon name="close"></g-icon>
          <g-icon name="check-item"></g-icon>
          <g-icon name="direction-down"></g-icon>
          <g-icon name="elipsis"></g-icon>
          <g-icon name="error"></g-icon>
          <g-icon name="layers"></g-icon>
          <g-icon name="search"></g-icon>
          <g-icon name="picture"></g-icon>
          <g-icon name="loading"></g-icon>
          <g-icon name="back"></g-icon>
        </template>
        <template v-slot:code>
          <code class="html">{{ fCode(simple.code.html) }}</code>
        </template>
      </g-block-box>

      <!-- 常用图标 -->
      <div id="g-ofen-list">
        <h3 class="demo-table-title">常用图标</h3>
        <ul class="g-list">
          <li
            :class="{ rigth_block: index % 5 === 4 }"
            :key="index"
            v-for="(item, index) in ofen_icon_list"
          >
            <div>
              <g-icon :name="item"></g-icon>
              <p class="g-name">{{ item }}</p>
            </div>
          </li>
        </ul>
      </div>

      <!-- 图标集合 -->
      <div id="g-list">
        <h3 class="demo-table-title">图标集合</h3>
        <ul class="g-list">
          <li
            :class="{ rigth_block: index % 5 === 4 }"
            :key="index"
            v-for="(item, index) in icon_list"
          >
            <div>
              <g-icon :name="item.font_class"></g-icon>
              <p class="g-name">{{ item.font_class }}</p>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
import Icons from '../../public/iconfont/iconfont.json'
export default {
  data() {
    return {
      //基础用法DEMO
      simple: {
        code: {
          html: `
          <g-icon name="taiyang"></g-icon>
          <g-icon name="close"></g-icon>
          <g-icon name="check-item"></g-icon>
          <g-icon name="direction-down"></g-icon>
          <g-icon name="elipsis"></g-icon>
          <g-icon name="error"></g-icon>
          <g-icon name="layers"></g-icon>
          <g-icon name="search"></g-icon>
          <g-icon name="picture"></g-icon>
          <g-icon name="loading"></g-icon>
          <g-icon name="back"></g-icon>
          `,
        },
      },
      ofen_icon_list: [
        'guanbi',
        'shizhong',
        'add',
        'arrow-up-circle',
        'arrow-down',
        'back',
        'search',
        'delete',
        'direction-down',
        'copy',
        'cut',
        'data-view',
        'direction-down-circle',
        'direction-right',
        'direction-up',
      ],
      icon_list: [],
    }
  },
  created() {
    this.icon_list = Icons.glyphs
  }
}
</script>
<style lang="scss" scoped>
.g-wrap {
  i {
    font-size: 28px;
    color: var(--config-color-text);
  }
  .demo-i-wrap {
    i {
      margin-right: 20px;
    }
  }
  .g-list {
    width: 100%;
    overflow: hidden;
    list-style: none;
    padding: 0 !important;
    border: 1px solid #eaeefb;
    border-radius: 4px;
    .rigth_block {
      border-right: 0 !important;
    }
    li {
      float: left;
      width: 20%;
      text-align: center;
      cursor: pointer;
      height: 166px;
      color: #666;
      font-size: 13px;
      border-right: 1px solid #eee;
      border-bottom: 1px solid #eee;
      display: flex;
      justify-content: center;
      align-items: center;
      transition: all 0.15s ease-in-out;
      box-sizing: border-box;
      &:hover {
        background: var(--color-primary);
        div {
          color: #fff;
        }
        i {
          color: #fff;
          font-size: 40px;
        }
      }
      div {
        font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB,
          Microsoft YaHei, SimSun, sans-serif;
        color: #99a9bf;
        transition: all 0.15s ease-in-out;
        i {
          font-size: 32px;
          color: #606266;
          transition: all 0.15s ease-in-out;
        }
        .g-name {
          padding: 20px 0;
          height: 1em;
        }
      }
    }
  }
}
</style>
